<template>
  <div class="mp-group">
    <div class="mp-group-titer">
      <img src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="" class="mp-titer-img">
      <span class="mp-titer">本周热门榜单</span>
      <a href="" class="mp-title-more">全部榜单<span class="iconfont">&#xe604;</span></a>
    </div>
    <ul class="mp-hotsale-list">
      <router-link tag="li"
        class="mp-hotsale-item"
        v-for="item of list"
        :key="item.id"
        :to="'/details/'+item.id"
        >
        <a href="" class="mp-fulllink">
          <div class="mp-hotsale-top"><img class="mp-hotsale-tagimg" :src="item.ranking"></div>
          <div class="mp-hotsale-imgcon">
            <img :src="item.imgurl" alt="">
          </div>
          <div class="mp-hotsale-sight">{{ item.place }}</div>
          <div class="mp-hotsale-price">
            <span class="mpg-price">¥{{ item.price }}</span>起
          </div>
        </a>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HotList',
  props: {
    list: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
.mp-group
 margin-top 0.2rem
/* background-color #f5f5f5 */
 .mp-group-titer
  position relative
  padding-top 0.24rem
  padding-bottom 0.26rem
  .mp-titer
  display inline-block
   font-size 0.32rem
   line-height 0.44rem
   color #212121
   height 0.44rem
   margin-left 0.08rem
  .mp-titer-img
   display inline-block
   overflow hidden
   width 0.3rem
   height 0.3rem
   margin-left 0.2rem
   vertical-align: top
  .mp-title-more
   display inline-block
   position absolute
   top .36rem
   right .32rem
   color #616161
   font-size 0.24rem
   line-height .28rem
   span
    font-size 0.3rem
 .mp-hotsale-list
  padding 0rem 0.24rem
  overflow-x: scroll
  white-space: nowrap
.mp-hotsale-item
 position relative
 display inline-block
 padding 0.06rem 0rem 0.2rem
 width 2rem
 height 3.08rem
.mp-hotsale-item:not(:first-child)
 margin-left 0.12rem
.mp-fulllink
 display block
 height 100%
 width 100%
 .mp-hotsale-top
  position absolute
  top 0rem
  left 0rem
  z-index 1
  overflow hidden
  width 0.84rem
  height 0.4rem
  .mp-hotsale-tagimg
   width 100%
 .mp-hotsale-imgcon
  overflow hidden
  width 2rem
  height 2rem
  img
   width 100%
 .mp-hotsale-sight
  margin-top 0.12rem
  color #212121
  font-size 0.24rem
  line-height 0.32rem
  text-align center
 .mp-hotsale-price
  color #616161
  font-size 0.24rem
  line-height 0.32rem
  text-align center
  .mpg-price
   color #ff8300
</style>
